/**
* @desc: 登录页
* @author zhangqiang
* @date 2022/1/25
*/
<template>
    <div class="login">
        <!-- 左上方logo -->
        <img class="logo" v-if="language==zhStr" src="../../assets/common/img/logo.png" alt="">
        <img class="logo" v-if="language==enStr" src="../../assets/common/img/logo_en.png" alt="">
        <!-- 登陆元素 -->
        <div class="form-box" v-loading="setLangLoading"
             element-loading-background="rgba(255, 255,255, 0.4)"
        >
            <img class="topLine"
                 src="../../assets/common/img/login/leftLine.png" alt="">
            <img class="bottomLine"
                 src="../../assets/common/img/login/rightLine.png" alt="">
            <p class="proName" :class="{zh:language==zhStr}">{{$t('System name')}}</p>
            <div class="form-left"></div>
            <el-form :model="form" class="container" :show-message="true" :rules="rules" ref="ruleForm">
                <el-dropdown v-if="true" @command="handleSetLanguage" style="float: right;margin-top: 20px;margin-right: 20px;cursor: pointer">
                      <span class="el-dropdown-link">
                        <img src="../../assets/common/img/login/lang.png" alt=""><i style="color: #fff" class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :disabled="language=='zh-CN'" command="zh-CN">中文</el-dropdown-item>
                        <el-dropdown-item :disabled="language=='en-US'" command="en-US">English</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!-- 账户主名 -->
                <el-form-item class="zh-text">
                    <!--<img class="" src="../../assets/common/img/login/loginTitle.png" alt="">-->
                    <!--<img class="" src="../../assets/common/img/login/loginTitle_en.png" alt="">-->
                    <p style="color: #fff;font-weight: normal">{{$t('Log in')}}</p>
                </el-form-item>
                <el-form-item prop="username" class="username">
                    <el-input prefix-icon="el-icon-user-solid" auto-complete="new-password" v-model="form.username"
                              :placeholder="$t('username')" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="password" class="password">
                    <el-input prefix-icon="el-icon-s-goods" auto-complete="new-password" v-model="form.password"
                              ref="password" :placeholder="$t('Password')" type="password" autocomplete="new-password"
                              show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-checkbox @change="remPwdChange" :true-label="1" :false-label="0" v-model="remPwd">
                        <span style="color: #fff;">{{$t('Remember the password')}}</span>
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button class="login-btn" @keyup.enter="keyDown(e)" @click="loginSubmit" :loading="loadingBtn">
                        {{$t('Log in')}}
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    import i18n from '../../lang'
    import {getLocalUserInfo, removeLocalUserInfo,getSessionStorageLanguage} from "@/assets/common/js/global";
    import {login, accountinfoGetusertype, cachestroeSet, cachestroeGet, cachestroeRemove} from '@/api/login.js';
    // 加密
    const Base64 = require("js-base64").Base64;
    export default {
        data() {
            var validateUsername = (rule, value, callback) => {
                // debugger
                if (value === '') {
                    callback(new Error(this.i18n.t('Please enter user')));
                } else {
                    callback();
                }
            };
            var validatePassword = (rule, value, callback) => {
                // debugger
                if (value === '') {
                    callback(new Error(this.i18n.t('Please enter password')));
                } else {
                    callback();
                }
            };
            return {
                showLangSwitch:process.env.NODE_ENV == 'development',
                userType: null,
                remPwd: 0,
                setLangLoading: false,
                ifdisabled: false,
                loadingBtn: false,
                logindisabled: "",
                logintext: "",
                rememberPassword: false,
                form: {
                    username: "",
                    password: "",
                    // yzm: ""
                },
                rules: {
                    username: [{validator: validateUsername, required: true, trigger: "blur"}],
                    password: [{validator: validatePassword, required: true, trigger: "blur"}],
                },
                cacheKey: "userInfo",
                language: "",
                enStr: "en-US",
                zhStr: "zh-CN",
                isShowLangSwitch: false
            };
        },
        components: {},
        created() {
            this.language=this.getLang()
        },
        destroyed() {
            // 销毁事件
            window.removeEventListener("keydown", this.keyDown, false);
        },
        async mounted() {
            console.log(123,i18n);
            this.isShowLangSwitch = process.env.NODE_ENV == 'development'
            this.removeLocalUserInfo()

            var remPwd = await this.cachestroeGet("remPwd")
            var localUserInfo = await this.cachestroeGet("userInfo")
            this.userType = await this.cachestroeGet("userType")
            console.log(90, localUserInfo.data);
            // remPwd.data=0
            if (remPwd.data && localUserInfo.data) {
                this.remPwd = remPwd.data
                this.form = {...localUserInfo.data}
            } else {
                this.reset();
            }
            console.log(this.form);
            // 绑定监听事件
            window.addEventListener("keydown", this.keyDown)
        },
        methods: {
            handleSetLanguage(val){
                this.setLangLoading=true
                // alert(val)
                this.cachestroeSet({key: "language", value: val})
                setTimeout(() => {
                    this.getLang()
                },0.5*1000)
            },
            async getLang() {
                this.setLangLoading=false
                var lang = await this.cachestroeGet("language")
                this.$store.commit('SET_LANGUAGE', lang.data)
                console.log('登录界面设置语言',lang.data);
                this.language = lang.data
                document.title=this.i18n.t('System name')
                // location.reload()
            },
            langInput(val) {
                console.log(val);

            },
            // 删除缓存
            async cachestroeRemove(key) {
                var res = await cachestroeRemove(key)
                if (res.code === 200) {

                }
            },
            // 获取缓存
            cachestroeGet(key) {
                return cachestroeGet(key)
            },
            // 设置缓存
            cachestroeSet(params) {
                cachestroeSet(params).then((res) => {
                    if (res.code === 200) {

                    }
                }).catch(err => {

                }).finally(() => {

                })
            },
            removeLocalUserInfo() {
                localStorage.removeItem('userInfo')
            },
            getLocalUserInfo() {
                var userInfo = localStorage.getItem("userInfo")
                if (userInfo) {
                    return JSON.parse(userInfo)
                } else {
                    return ""
                }
            },
            remPwdChange(val) {
                // localStorage.setItem("remPwd",val)
                console.log(val);
            },
            keyDown(e) {
                console.log(e.keyCode);
                // 回车则执行登录方法 enter键的ASCII是13
                if (e.keyCode == 13) {
                    this.loginSubmit(); // 定义的登录方法
                }
            },
            getUserType() {
                accountinfoGetusertype(this.form.username).then(res => {
                    if (res.code == 200) {
                        // 设置用户类型
                        this.cachestroeSet({key: "userType", value: res.data + ""})
                        // 设置记住密码的状态
                        this.cachestroeSet({key: "remPwd", value: this.remPwd + '' || "0"})
                        // 存储用户名密码到后台
                        this.cachestroeSet({key: "userInfo", value: JSON.stringify(this.form)});
                        this.$set(this.form, 'userType', res.data)
                        console.log('this.form', this.form);
                        localStorage.setItem("userInfo", JSON.stringify(this.form))

                        //  编程式导航跳转页面
                        this.$router.push({path: '/dh'});

                        // this.$router.push({ path: '/dh' ,query:{userInfo:1}});
                    }
                    console.log(res);
                }).catch((err) => {
                }).finally(() => {
                    this.loadingBtn = false;
                })
            },
            /**
             * @description 点击登陆执行
             * @param Boolean: {formName} 校验是否通过
             * @return
             * @author hanzheng 2022-02-09 09:29:20
             **/
            loginSubmit() {
                // 校验表单
                this.$refs.ruleForm.validate(async (valide) => {
                    if (valide) {
                        this.loadingBtn = true;
                        // this.logindisabled = "logindisabled";
                        let form = {
                            username: this.form.username,
                            password: this.form.password
                        };
                        // if(!this.remPwd){
                        //     // 移除用户信息
                        //     this.cachestroeRemove('userInfo')
                        // }
                        // return
                        login(form).then(res => {
                            if (res.code == 200) {
                              this.$set(this.form, 'userId', res.data)
                                this.getUserType()

                            }
                        }).catch((err) => {
                        }).finally(() => {
                            this.loadingBtn = false;
                        })
                    }
                });
            },
            reset() {
                this.form.username = "";
                this.form.password = "";
            }
        }
    };
</script>
<style lang='less' scoped>
    /* 输入框错误 */
    ::v-deep .el-form-item.is-error .el-input__inner {
        border: solid 1px #ff251d !important;
    }

    .el-form {
        display: block !important;
    }

    .el-form .el-form-item {
        margin-bottom: 25px;
    }

    .el-form-item.cwxx {
        margin-bottom: 25px;
    }

    .login {
        background: url("../../assets/common/img/login/bj.jpg") no-repeat;
        background-size: 100% 100%;
        position: relative;

        .form-box {
            position: relative;
            width: 1000px;
            height: 400px;
            overflow: hidden;
            box-sizing: border-box;
            .proName {
                position: absolute;
                top: 60px;
                left: 8%;
                font-weight: bold;
                font-size: 25px;

                &.zh {
                    left: 20%;
                }
            }
            .topLine{
                position: absolute;
                left: -15px;
                bottom: -15px;
            }
            .bottomLine{
                position: absolute;
                top: -15px;
                right: -15px
            }
        }

        .el-dialog {
            width: 420px;
        }

        .el-input .el-input__inner {
            width: 100%;
            height: 34px;
            line-height: 34px;
            padding-left: 20px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            overflow: hidden;
        }

        .username, .password, .login-btn {
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
        }
      .login-btn{
        background: linear-gradient(180deg, rgba(21, 118, 237, 1) 0.07%, rgba(4, 183, 219, 1) 100%) !important;
        border-radius: 8px;
        color: #fff;
        border: none;
      }
        .el-input__icon {
            line-height: 42px;
        }

        position: fixed;
        width: 100%;
        height: 100%;
    }
</style>
